<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-wrap-layout-popup" *ngIf="isShow">
  <div class="ddp-ui-layout-popup">
    <div class="ddp-box-popup3 ">
      <a href="javascript:" class="ddp-btn-close" (click)="close()"></a>
      <!-- title -->
      <div class="ddp-pop-title">{{'msg.dp.ui.create.ss' | translate}}</div>
      <!-- //title -->
      <!-- detail -->
      <div class="ddp-box-detail ddp-type ddp-label-size">
        <!-- edit -->
        <div class="ddp-wrap-edit3 ddp-type">
          <label class="ddp-label-type">{{ 'msg.dp.ui.ss-name' | translate }}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option" [ngClass]="{'ddp-error': ssNameErrorMsg !== ''}">
            <input type="text" class="prep-snapshot-name-input ddp-input-typebasic"
                   placeholder="{{ 'msg.dp.ui.ss-name' | translate }}"
                   (keyup)="changeSSUri()"
                   (keydown)="ssNameKeyDown()"
                   [(ngModel)]="snapshot.ssName">
            <span class="ddp-data-error" *ngIf="ssNameErrorMsg !== ''"> {{ssNameErrorMsg}}</span>
          </div>
          <!-- //edit option -->
        </div>
        <!-- //edit -->
        <!-- edit -->
        <div class="ddp-wrap-edit3 ddp-type ddp-mgb20">
          <label class="ddp-label-type">{{'msg.dp.th.ss-type' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <label class="ddp-label-radio ddp-inline">
              <input type="radio" checked (change)="changeSsType(SsType.URI)" name="snapshotFormatRadio">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{'msg.dp.ui.file-system' | translate }}</span>
            </label>
            <label class="ddp-label-radio ddp-inline">
              <input type="radio" name="snapshotFormatRadio" [disabled]="false===isStagingEnabled()" (change)="changeSsType(SsType.STAGING_DB)">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{ 'msg.dp.th.stagingdb' | translate }}</span>
            </label>
          </div>
          <!-- //edit option -->
        </div>
        <!-- //edit -->
        <div *ngIf="snapshot.ssType && snapshot.ssType === SsType.URI">
          <div class="ddp-wrap-edit3 ddp-type">
            <label class="ddp-label-type">{{'msg.dp.ui.location' | translate }}</label>
            <!-- selectbox -->
            <component-select
              [array]="fileLocations"
              [isUpSelect]="false"
              [isFull]="true"
              [viewKey]="'label'"
              (onSelected)="onSelected($event,'location')"
            >
            </component-select>
            <!-- //selectbox -->
          </div>
          <!-- 고급설정 -->
          <!-- ddplink-high 클릭시 ddp-selected 추가 -->
          <div class="ddp-wrap-high" [ngClass]="{ 'ddp-selected' : isAdvancedPrefOpen }">
            <div class="ddp-ui-high-option">
              <a href="javascript:" class="ddp-link-high" (click)="toggleAdvancedSettingBtn()">{{'msg.dp.btn.advanced.settings' | translate }}<em class="ddp-icon-view"></em></a>
            </div>
            <div class="ddp-high-setting">
              <!-- edit -->
              <div class="ddp-wrap-edit3 ddp-type ddp-mgb20">
                <label class="ddp-label-type">{{'msg.dp.th.ss.etl-engine' | translate}}</label>
                <!-- edit option -->
                <div class="ddp-ui-edit-option">
                  <label class="ddp-label-radio ddp-inline">
                    <input type="radio" checked (change)="changeEtlEngine(Engine.EMBEDDED)" name="EtlEngineRadio">
                    <i class="ddp-icon-radio"></i>
                    <span class="ddp-txt-radio">{{'msg.dp.th.ss.etl-engine.embedded' | translate }}</span>
                  </label>
                  <label class="ddp-label-radio ddp-inline">
                    <input type="radio" [disabled]="false===isSparkEnabled()" (change)="changeEtlEngine(Engine.SPARK)" name="EtlEngineRadio">
                    <i class="ddp-icon-radio"></i>
                    <span class="ddp-txt-radio">{{'msg.dp.th.ss.etl-engine.spark' | translate }}</span>
                  </label>
                </div>
                <!-- //edit option -->
              </div>
            </div>
            <!-- //edit -->
            <div class="ddp-high-setting">
              <!-- edit -->
              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{'msg.dp.th.file-format' | translate}}</label>
                <!-- selectbox -->
                <component-select
                  [array]="fileFormat"
                  [isUpSelect]="false"
                  [viewKey]="'label'"
                  [isFull]="true"
                  (onSelected)="onSelected($event,'format')">
                </component-select>
                <!-- //selectbox -->
                <!-- //edit option -->
                <div class="ddp-form-error" [ngClass]="{'ddp-error': fileFormatErrorMsg !== ''}">
                  <span class="ddp-data-error" *ngIf="fileFormatErrorMsg !== ''"> {{fileFormatErrorMsg}}</span>
                </div>
              </div>
            </div>
            <div class="ddp-high-setting">
              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{ 'msg.dp.ui.file-url' | translate }}</label>
                <!-- edit option -->
                <div class="ddp-ui-edit-option" [ngClass]="{'ddp-error': fileUrlErrorMsg !== ''}">
                  <input type="text"
                         class="ddp-input-typebasic"
                         [(ngModel)]="snapshot.storedUri"
                         (ngModelChange)="onChangeStoredUri($event)"
                         (keydown)="fileUriKeyDown()">
                  <span class="ddp-data-error" *ngIf="fileUrlErrorMsg !== ''"> {{fileUrlErrorMsg}}</span>
                </div>
                <!-- //edit option -->
              </div>
            </div>
          </div>
        </div>
        <div *ngIf="snapshot.ssType && snapshot.ssType === SsType.STAGING_DB">
          <div class="ddp-wrap-edit3 ddp-type">
            <label class="ddp-label-type">{{'msg.dp.th.db-name' | translate}}</label>
            <!-- edit option -->
            <component-select
              [isUpSelect]="false"
              [array]="dbList"
              [isFull]="true"
              (onSelected)="onSelectedDBName($event)">
            </component-select>
            <!-- //edit option -->
          </div>
          <!-- //edit -->
          <!-- edit -->
          <div class="ddp-wrap-edit3 ddp-type">
            <label class="ddp-label-type">{{'msg.dp.th.tbl-name' | translate}}</label>
            <!-- edit option -->
            <div class="ddp-ui-edit-option" [ngClass]="{'ddp-error': tblErrorMsg !== ''}">
              <input type="text"
                     class="ddp-input-typebasic"
                     id="tableName"
                     placeholder="{{'msg.dp.th.tbl-name.ph' | translate}}"
                     (keydown)="tblNameKeyDown()"
                     [(ngModel)]="snapshot.tblName">
              <span class="ddp-data-error" *ngIf="tblErrorMsg !== ''"> {{tblErrorMsg}}</span>
            </div>
            <!-- //edit option -->
          </div>

          <!-- ddplink-high 클릭시 ddp-selected 추가 -->
          <div class="ddp-wrap-high" [ngClass]="{ 'ddp-selected' : isAdvancedPrefOpen }">
            <div class="ddp-ui-high-option">
              <a href="javascript:" class="ddp-link-high" (click)="toggleAdvancedSettingBtn()">{{'msg.dp.btn.advanced.settings' | translate }}<em class="ddp-icon-view"></em></a>
            </div>
            <div class="ddp-high-setting">
              <!-- edit -->
              <!--
              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{ 'msg.dp.ui.etl-engine' | translate }}</label>
                <component-select
                  [array]="engineList"
                  [isUpSelect]="false"
                  [isFull]="true"
                  [viewKey]="'label'"
                  (onSelected)="onSelected($event,'engine')"
                >
                </component-select>
              </div>
              -->
              <!-- //edit option -->

              <!-- edit -->
              <div class="ddp-wrap-edit3 ddp-type ddp-mgb20">
                <label class="ddp-label-type">{{'msg.dp.th.ss.etl-engine' | translate}}</label>
                <!-- edit option -->
                <div class="ddp-ui-edit-option">
                  <label class="ddp-label-radio ddp-inline">
                    <input type="radio" checked (change)="changeEtlEngine(Engine.EMBEDDED)" name="EtlEngineRadio">
                    <i class="ddp-icon-radio"></i>
                    <span class="ddp-txt-radio">{{'msg.dp.th.ss.etl-engine.embedded' | translate }}</span>
                  </label>
                  <label class="ddp-label-radio ddp-inline">
                    <input type="radio" [disabled]="false===isSparkEnabled()" (change)="changeEtlEngine(Engine.SPARK)" name="EtlEngineRadio">
                    <i class="ddp-icon-radio"></i>
                    <span class="ddp-txt-radio">{{'msg.dp.th.ss.etl-engine.spark' | translate }}</span>
                  </label>
                </div>
                <!-- //edit option -->
              </div>
              <!-- //edit -->

              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{'msg.dp.th.file-format' | translate}}</label>
                <!-- selectbox -->
                <component-select
                  [array]="hiveEmbeddedFormat"
                  [isUpSelect]="false"
                  [isFull]="true"
                  [viewKey]="'label'"
                  (onSelected)="onSelected($event,'format')"
                >
                </component-select>
                <!-- //selectbox -->
                <!-- //edit option -->
              </div>
              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{'msg.dp.th.compression' | translate}}</label>
                <!-- selectbox -->
                <component-select
                  [array]="compressionType"
                  [isUpSelect]="false"
                  [isFull]="true"
                  [viewKey]="'label'"
                  (onSelected)="onSelected($event,'compression')"
                >
                </component-select>
                <!-- //selectbox -->
              </div>
              <!-- //edit -->

              <!-- edit -->
              <div class="ddp-wrap-edit3 ddp-type">
                <label class="ddp-label-type">{{'msg.dp.th.overwrite-method' | translate}}</label>
                <!-- selectbox -->
                <component-select
                  [array]="overwriteMethod"
                  [isUpSelect]="false"
                  [isFull]="true"
                  [viewKey]="'label'"
                  (onSelected)="onSelected($event,'mode')"
                >
                </component-select>
                <!-- //selectbox -->
              </div>
              <!-- //edit -->

              <!-- edit -->
              <div class="ddp-wrap-edit3 ddp-type ddp-block">
                <label class="ddp-label-type">{{'msg.dp.th.partition-keys' | translate}}</label>
                <div>
                  <component-multi-select
                    [array]="fields"
                    [viewKey]="'name'"
                    [isUpSelect]="false"
                    (onSelected)="onPartitionSelected($event)"
                    [usePlaceholder]="true"
                    [unselectedMessage]="'msg.dp.th.partition-keys.ph' | translate"
                  >
                  </component-multi-select>
                  <!-- //selectbox -->
                </div>
              </div>
              <!-- //edit -->
              <!-- 고급설정 -->
            </div>
          </div>
        </div>
        <div class="ddp-ui-message" *ngIf="isErrorShow">
          <div class="ddp-box-synch type-error">
            <div class="ddp-txt-synch">
              <em class="ddp-icon-info"></em>
              {{'msg.dp.ss.check.error' | translate }}
            </div>
          </div>
        </div>
      </div>
      <!-- detail -->

      <!-- button -->
      <div class="ddp-ui-buttons">
        <a href="javascript:" class="ddp-btn-type-popup" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
        <!-- disabled 시 ddp-disabled 추가 -->
        <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="complete()">{{'msg.comm.btn.done2' | translate}}</a>
      </div>
      <!-- //button -->
    </div>
  </div>


</div>
<app-confirm-modal (confirm)="openRenamePopup()"></app-confirm-modal>
